import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:mall/core/models/bank.dart';
import 'package:mall/core/providers/pages/mine/manage/bank_delete_model.dart';
import 'package:mall/core/providers/pages/mine/manage/bank_list_model.dart';
import 'package:mall/core/providers/view_model.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mall/screens/manage/bank_edit_page.dart';
import 'package:provider/provider.dart';

class BankPage extends StatelessWidget {
  static const routeName = '/BankPage';
  final bool args;

  BankPage({
    Key key,
    @required this.args,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => BankListModel(Provider.of(context, listen: false), args),
        ),
        ChangeNotifierProvider(
          create: (context) => BankDeleteModel(Provider.of(context, listen: false)),
        )
      ],
      child: Scaffold(
        appBar: AppBar(
          title: Text('银行卡'),
        ),
        body: Consumer<BankListModel>(
          builder: (context, model, child) {
            switch (model.viewState) {
              case ViewState.busy:
                return Center(
                  child: CircularProgressIndicator(),
                );
              case ViewState.error:
                return Center(
                  child: Text(model.errorMessage),
                );
              case ViewState.success:
                return _SuccessWidget(
                  list: model.list,
                );
              default:
                return Container();
            }
          },
        ),
      ),
    );
  }
}

class _SuccessWidget extends StatelessWidget {
  final List<Bank> list;

  const _SuccessWidget({
    Key key,
    @required this.list,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        _HeaderWidget(),
        _BankListWidget(
          list: list,
        ),
        _BottomWidget(),
      ],
    );
  }
}

class _HeaderWidget extends StatelessWidget {
  const _HeaderWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        height: 50.w,
        child: Row(
          children: <Widget>[
            SizedBox(width: 16),
            Image.asset(
              'assets/images/bank/ic_bank.png',
              width: 16,
              color: Colors.black,
            ),
            SizedBox(width: 8),
            Text('我的银行卡')
          ],
        ),
      ),
    );
  }
}

class _BankListWidget extends StatelessWidget {
  final List<Bank> list;

  const _BankListWidget({
    Key key,
    @required this.list,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return _BankItemWidget(
            bank: list[index],
          );
        },
        childCount: list.length,
      ),
    );
  }
}

class _BankItemWidget extends StatelessWidget {
  final Bank bank;

  const _BankItemWidget({
    Key key,
    @required this.bank,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Slidable(
      child: GestureDetector(
        child: Container(
          color: Colors.white,
          child: Container(
            padding: EdgeInsets.symmetric(
              vertical: 24.w,
            ),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Colors.purpleAccent,
                  Theme.of(context).accentColor,
                ],
              ),
              borderRadius: BorderRadius.circular(8),
            ),
            margin: EdgeInsets.symmetric(
              vertical: 4.w,
              horizontal: 8.w,
            ),
            child: Row(
              children: <Widget>[
                SizedBox(width: 12),
                Expanded(
                  child: Text(
                    bank.accountTypeName ?? '',
                    style: TextStyle(color: Colors.white, fontSize: 17),
                  ),
                ),
                Text(
                  bank.bankCardId ?? '',
                  style: TextStyle(color: Colors.white, fontSize: 17),
                ),
                Icon(Icons.keyboard_arrow_right, color: Colors.white),
                SizedBox(width: 12),
              ],
            ),
          ),
        ),
        onTap: () => _onItemClicked(context, bank),
      ),
      actionPane: SlidableDrawerActionPane(),
      secondaryActions: <Widget>[
        IconSlideAction(
          color: Colors.red,
          icon: Icons.delete,
          onTap: () => _onBankDelete(context),
        )
      ],
    );
  }

  void _onItemClicked(BuildContext context, Bank bank) async {
    BankListModel bankListModel = Provider.of(context, listen: false);
    if (bankListModel.selectable) {
      Navigator.of(context).pop(bank);
    } else {
      _pushBankEditPage(context, bank);
    }
  }

  void _onBankDelete(BuildContext context) async {
    BankDeleteModel bankDeleteModel = Provider.of(context, listen: false);
    ViewState viewState = await bankDeleteModel.bankDelete(bank.id);
    switch (viewState) {
      case ViewState.error:
        EasyLoading.showToast(bankDeleteModel.errorMessage);
        break;
      default:
        BankListModel bankListModel = Provider.of(context, listen: false);
        bankListModel.refreshData();
        break;
    }
  }
}

class _BottomWidget extends StatelessWidget {
  const _BottomWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.white,
        child: InkWell(
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 24),
            decoration: BoxDecoration(
              border: Border.all(color: Theme.of(context).primaryColor),
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            margin: EdgeInsets.only(left: 8, top: 4, right: 8, bottom: 24),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                  'assets/images/bank/ic_add.png',
                  width: 18,
                  color: Theme.of(context).primaryColor,
                ),
                SizedBox(width: 13),
                Text(
                  '添加银行卡',
                  style: TextStyle(color: Colors.grey, fontSize: 17),
                )
              ],
            ),
          ),
          onTap: () => _pushBankEditPage(context, null),
        ),
      ),
    );
  }
}

void _pushBankEditPage(BuildContext context, Bank bank) async {
  var result = await Navigator.of(context).pushNamed(BankEditPage.routeName, arguments: bank);
  if (result is bool ? result : false) {
    BankListModel bankListModel = Provider.of(context, listen: false);
    bankListModel.refreshData();
  }
}
